<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./样式.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./数据.txt">
</head>
<body>
    <div class="box">
        <div class="son">
            精品推荐<p class="a1" >查看全部 <span class="iconfont icon-arrow-right-bold"></span></p>
        </div>
        <ul>
            
        </ul>
    </div>
</body>
</html>
<script>
        // 数据
        let data = [
      {
        src: './uploads/quality01.png',
        title: 'JavaScript数据看板项目实战',
        num: 1125
      },
      {
        src: './uploads/quality02.png',
        title: 'Vue.js实战——面经全端项目',
        num: 2726
      },
      {
        src: './uploads/quality03.png',
        title: '玩转Vue全家桶，iHRM人力资源项目',
        num: 9456
      },
      {
        src: './uploads/quality04.png',
        title: 'Vue.js实战医疗项目——优医问诊',
        num: 7192
      },
      {
        src: './uploads/quality05.png',
        title: '小程序实战：小兔鲜电商小程序项目',
        num: 2703
      },
      {
        src: './uploads/quality06.png',
        title: '前端框架Flutter开发实战',
        num: 2841
      },
      {
        src: './uploads/quality07.png',
        title: '熟练使用React.js——极客园H5项目',
        num: 95682
      },
      {
        src: './uploads/quality08.png',
        title: '熟练使用React.js——极客园PC端项目',
        num: 904
      },
      {
        src: './uploads/quality09.png',
        title: '前端实用技术，Fetch API 实战',
        num: 1516
      },
      {
        src: './uploads/quality10.png',
        title: '前端高级Node.js零基础入门教程',
        num: 2766
      }
    ]

    //获取
    var ul=document.querySelector('ul')
    
    //循环遍历数组
    for(i=0;i<data.length;i++){
        //创建
        var li=document.createElement('li')
        //使用超级字符串赋值
        li.innerHTML=`
                <img src="${data[i].src}">
                <p class="c1">${data[i].title}&nbsp; </p><br>
                <p class="b1"><font color="orange">高级</font>&nbsp;&nbsp;·&nbsp;&nbsp;${data[i].num}人在学习</p>
        `;
        //添加
        ul.appendChild(li)
    }
</script>